<template>
  <div class="app-container">
    <el-row style="width: 100%; height: 100%; margin: 0" :gutter="10">
      <!--区域数据-->
      <el-col :span="4" style="height: 100%; padding-left: 0">
        <div style="background-color: #ffffff; height: 100%; padding: 10px">
          <el-input
            placeholder="输入关键字进行过滤"
            clearable
            size="mini"
            suffix-icon="el-icon-search"
            style="width: 100%"
            v-model="filterText"
          />
          <div
            style="
              height: 96%;
              max-height: 96%;
              overflow-y: auto;
              margin-top: 10px;
            "
            class="treeCont"
          >
            <!--            :default-expanded-keys="[2, 3]"-->
            <el-tree
              :default-expanded-keys="defaultExpandedKeys"
              :data="sheetsTreeList"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="sheetsCode"
              :highlight-current="true"
              v-loading="treeLoading"
              :current-node-key="currentKey"
              @node-click="handleNodeClick"
            >
              <template #default="{ node, data }">
                <div
                  class="custom-tree-node"
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                  "
                >
                  <span
                    class="iconfont icon-a-jiafangzijianzhu icon-padding"
                    v-if="data.deviceType === 0"
                  ></span>
                  <span
                    class="iconfont icon-loudong icon-padding"
                    v-if="data.deviceType === 1"
                  ></span>
                  <span
                    class="iconfont icon-a-homezhuyefangzijia icon-padding"
                    v-if="data.deviceType === 2"
                  ></span>
                  <span>{{ node.label }}</span>
                  <!-- <span v-if="data.deviceCount!=null" class="device-count">({{data.deviceCount}})</span> -->
                </div>
              </template>
            </el-tree>
          </div>
        </div>
      </el-col>

      <el-col :span="20" style="height: 100%; background-color: #ffffff">
        <div style="width: 100%; margin: 10px 5px 10px 0">
          <el-row class="line-bottom" v-show="showSearch">
            <el-col class="form_col">
              <el-form
                :model="queryParams"
                ref="queryForm"
                :size="formItemSize"
                v-show="showSearch"
                :label-width="labelWidth"
              >
                <div id="searchFilter" style="display: flex; flex-wrap: wrap">
                  <el-form-item label="能耗分类" prop="energyUseClassification">
                    <el-select
                    
                      :size="formItemSize"
                      v-model="queryParams.energyUseClassification"
                      placeholder="请选择能耗分类"
                      filterable
                      @keyup.enter.native="handleQuery"
                      @change="(val) => changeEnergyUseClassification(val)"
                    >
                      <el-option
                        v-for="dict in dict.type.energy_use_classification"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                        :selected="dict.value === 1"
                      />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="设备编号" prop="terminalId">
                    <el-input :size="formItemSize"
                              v-model="queryParams.terminalId"
                              placeholder="请输入设备编号"
                              clearable
                              @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="设备名称" prop="imei">
                    <el-input :size="formItemSize"
                              v-model="queryParams.imei"
                              placeholder="请输入设备名称"
                              clearable
                              @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="地址" prop="installAddress">
                    <el-input :size="formItemSize"
                              v-model="queryParams.installAddress"
                              placeholder="请输入地址"
                              clearable
                              @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>

                  <el-form-item label="用户编号" prop="userId">
                    <!-- <el-input :size="formItemSize"
                              v-model="queryParams.userId"
                              placeholder="请输入用户编号"
                              clearable
                              @keyup.enter.native="handleQuery"
                    /> -->
                    <el-select
                    :filter-method="dataFilterQuery"
                      style="width: 100%;"
                      :size="formItemSize"
                      v-model="queryParams.userId"
                      
                      placeholder="请选择用户"
                      filterable
                      clearable
                      
                    >
                      <el-option
                        v-for="userXb in userXbOptionQuery"
                        :key="userXb.id"
                        :label="userXb.userName"
                        :value="userXb.userId"
                      >
                        <span style="float: left">{{ userXb.userId }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >{{ userXb.userName }}</span
                        >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="数据状态" prop="dataStatus">
                    <el-select
                      :size="formItemSize"
                      v-model="queryParams.dataStatus"
                      placeholder="请选择数据状态"
                      clearable
                      filterable
                      @keyup.enter.native="handleQuery"
                    >
                      <el-option
                        
                        v-for="dict in dict.type.realtime_data_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="用户名称" prop="installAddress">
                    <el-input :size="formItemSize"
                              v-model="queryParams.installAddress"
                              placeholder="请输入用户名称"
                              clearable
                              @keyup.enter.native="handleQuery"
                    />
                  </el-form-item> -->

                  <el-form-item label="满转状态" prop="fullStatus">
                    <el-select
                      :size="formItemSize"
                      v-model="queryParams.fullStatus"
                      placeholder="请选择满转状态"
                      clearable
                      filterable
                      @keyup.enter.native="handleQuery"
                    >
                      <el-option
                        
                        v-for="dict in dict.type.realtime_full_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="能耗分项" prop="energyUseItem">
                    <el-select
                      :size="formItemSize"
                      v-model="queryParams.energyUseItem"
                      placeholder="请选择能耗分项"
                      clearable
                      filterable
                      @keyup.enter.native="handleQuery"
                    >
                      <el-option
                        v-for="dict in dict.type[
                          energyUseClassification == '1'
                            ? 'energy_use_item'
                            : 'energy_use_item_water'
                        ]"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>

                  <!-- <el-form-item label="IMEI" prop="imei">
                    <el-input :size="formItemSize"
                              v-model="queryParams.imei"
                              placeholder="输入imei"
                              clearable
                    />
                  </el-form-item>
                  <el-form-item label="注册平台" prop="signPlatform">
                    <el-select filterable v-model="queryParams.signPlatform" placeholder="请选择注册平台" style="width: 100%;">
                      <el-option v-for="dict in dict.type.sign_platform" :key="dict.value" :label="dict.label"
                                 :value="parseInt(dict.value)"></el-option>
                    </el-select>
                  </el-form-item> -->
                </div>
              </el-form>
            </el-col>
            <el-col class="form_query" style="line-height: 1; padding: 0">
              <el-button
                v-show="collapseAble"
                size="mini"
                type="text"
                @click="shiftCollapseAble"
                class="text"
              >
                <span>
                  {{ fold ? "收起筛选" : "更多筛选" }}
                </span>
              </el-button>
              <el-button
                type="primary"
                @click="handleAdd"
                size="mini"
                plain
                icon="el-icon-plus"
                >手动录入</el-button
              >
              <el-button type="primary" @click="handleQuery" size="mini"
                >查询</el-button
              >
              <el-button @click="resetQuery" size="mini">重置</el-button>
              <RightDropdown
                :columns="columns"
                :showSearch.sync="showSearch"
                :tableVisible="false"
                :queryVisible="false"
                @queryTable="getList"
                @export="handleExport"
                :hasPermiExport="['datastatistics:realtimegatherdataxb:export']"
                style="margin-left: 10px"
              ></RightDropdown>
              <!-- :hasPermiExport="['datastatistics:realtimegatherdataxb:export']"  -->
            </el-col>
          </el-row>
          <el-table
            ref="table"
            v-loading="loading"
            :data="dataList"
            border
            size="mini"
            :default-sort="defaultSort"
            @sort-change="handleSorterChange"
            :height="getAvailableHeight"
            :key="changeShowData"
            ><!-- v-transition="fade"-->

            <el-table-column
              type="index"
              label="#"
              width="40"
              align="center"
            ></el-table-column>

            <el-table-column
              label="设备名称"
              align="center"
              prop="imei"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :show-overflow-tooltip="true"
              width="150"
            />

            <!-- <el-table-column
              label="地址"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              align="center"
              :show-overflow-tooltip="true"
              prop="installAddress"
              width="120"
            ></el-table-column> -->
            <el-table-column
              v-if="changeShowData === 'power'"
              label="设备编号"
              align="center"
              prop="terminalId"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :show-overflow-tooltip="true"
              width="140"
            >
              <template slot-scope="scope">
                <router-link
                  :to="{
                    name: 'ElectricityHistoryXb',
                    params: {
                      locationNb: scope.row.locationNb,
                      terminalId: scope.row.terminalId,
                    },
                  }"
                  style="color: #00afff"
                  >{{ scope.row.terminalId }}</router-link
                >
              </template>
            </el-table-column>
            <el-table-column
              v-if="changeShowData === 'water'"
              label="设备编号"
              align="center"
              prop="terminalId"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :show-overflow-tooltip="true"
              width="140"
            >
              <template slot-scope="scope">
                <router-link
                  :to="{
                    name: 'HistoryXb',
                    params: {
                      locationNb: scope.row.locationNb,
                      terminalId: scope.row.terminalId,
                    },
                  }"
                  style="color: #00afff"
                  >{{ scope.row.terminalId }}</router-link
                >
              </template>
            </el-table-column>
            <el-table-column
              label="抄表时间"
              align="center"
              prop="readDate"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :show-overflow-tooltip="true"
              width="170"
            >
              <template slot-scope="scope">
                <span>{{
                  parseTime(scope.row.readDate, "{y}-{m}-{d} {h}:{i}:{s}")
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="数据状态"
              align="center"
              prop="dataStatus"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :show-overflow-tooltip="true"
              width="170"
            >
              <!-- <template slot-scope="scope">
                 <el-button size="mini" v-if=" parseDataStatus(scope.row.readDate) == 1 "  type="success">正常</el-button>
                 <el-button size="mini" v-else type="danger">数据异常</el-button>
              </template> -->
            <template slot-scope="scope">
              <dict-tag :options="dict.type.realtime_data_status" :value="scope.row.dataStatus"/>
            </template>
            </el-table-column>

            <el-table-column
              label="满转状态"
              align="center"
              prop="fullStatus"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :show-overflow-tooltip="true"
              width="170"
            >

            <template slot-scope="scope">
              <dict-tag :options="dict.type.realtime_full_status" :value="scope.row.fullStatus"/>
            </template>
            </el-table-column>

               <el-table-column
              label="地址"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              align="center"
              :show-overflow-tooltip="true"
              prop="installAddress"
              width="120"
            ></el-table-column>





            <el-table-column
              v-for="(item, index) in columns"
              v-if="item.key >= 9 && item.visible && changeShowData === 'power'"
              :prop="item.prop"
              align="center"
              :label="item.label"
              sortable="custom"
              :width="
                ((item.label.length <= 2 ? 4 : item.label.length) + 1) * 20
              "
              :show-overflow-tooltip="true"
            ></el-table-column>


         





            <el-table-column
              label="用户名称"
              align="center"
              prop="userName"
              v-if="columns[0].visible && changeShowData === 'water'"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :show-overflow-tooltip="true"
            />
            <!-- <el-table-column
              label="用户编号"
              align="center"
              prop="userId"
              v-if="columns[1].visible && changeShowData === 'water'"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :show-overflow-tooltip="true"
            /> -->
            <!-- <el-table-column
              label="设备名称"
              align="center"
              prop="imei"
              v-if="columns[3].visible && changeShowData === 'water'"
              sortable="custom"
              :show-overflow-tooltip="true"
              width="150"
            /> -->
            <el-table-column
              label="水表读数(m³)"
              align="center"
              prop="totalFlow"
              v-if="columns[4].visible && changeShowData === 'water'"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :show-overflow-tooltip="true"
              width="150"
            />
            <el-table-column
              label="终端电压(V)"
              align="center"
              prop="terminalVol"
              v-if="columns[5].visible && changeShowData === 'water'"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :show-overflow-tooltip="true"
              width="150"
            />
            <el-table-column
              label="阀门状态"
              align="center"
              prop="valveState"
              v-if="columns[6].visible && changeShowData === 'water'"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.valveState === 1">开</span>
                <span v-if="scope.row.valveState === 0">关</span>
                <!-- {{ scope.row }} -->
              </template>
            </el-table-column>
            <el-table-column
              label="信号强度"
              align="center"
              prop="terminalCsq"
              v-if="columns[7].visible && changeShowData === 'water'"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :show-overflow-tooltip="true"
            />
          </el-table>
          <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>

        <!-- 添加或修改能耗分项监控对话框 -->
        <el-dialog
          :title="title"
          :visible.sync="open"
          width="880px"
          append-to-body
          label-width="100px"
        >
          <el-form
            ref="formXb"
            :model="form"
            :rules="rules"
            label-width="150px"
            :style="dynamicFormStyle"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="能耗分类" prop="energyUseClassification">
                  <el-select
                    :size="formItemSizeAdd"
                    v-model="form.energyUseClassification"
                    placeholder="请选择能耗分类"
                    filterable
                    style="width: 100%;"
                    @change="(val) => changeEnergyUseClassificationForm(val)"
                  >
                    <el-option
                      v-for="dict in dict.type.energy_use_classification"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                      :selected="dict.value === '1'"
                    >
                      <!-- {{dict}} -->
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="0">
                <el-form-item prop="supplierId">
                  <el-input
                    :size="formItemSizeAdd"
                    v-model="form.supplierId"
                    type="hidden"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="0">
                <el-form-item prop="locationNb">
                  <el-input
                    :size="formItemSizeAdd"
                    v-model="form.locationNb"
                    type="hidden"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="0">
                <el-form-item prop="tenantId">
                  <el-input
                    :size="formItemSizeAdd"
                    v-model="form.tenantId"
                    type="hidden"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="倍率" prop="magnification">
                  <el-input-number
                    :size="formItemSizeAdd"
                    v-model="form.magnification"
                    :precision="2"
                    :step="0.01"
                  ></el-input-number>
                </el-form-item>
              </el-col>


            </el-row>

            <!-- 电表 -->
            <div v-if="form.energyUseClassification == 1">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户编号" prop="userId">
                    <el-select
                    :filter-method="dataFilter"
                      style="width: 100%;"
                      :size="formItemSizeAdd"
                      v-model="form.userId"
                      
                      placeholder="请选择用户"
                      filterable
                      clearable
                      @change="(val) => changeUserId(val)"
                    >
                      <el-option
                        v-for="userXb in userXbOption"
                        :key="userXb.id"
                        :label="userXb.userName"
                        :value="userXb.userId"
                      >
                        <span style="float: left">{{ userXb.userId }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >{{ userXb.userName }}</span
                        >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="设备编号" prop="terminalId">
                    <el-select
                    style="width: 100%;"
                      :size="formItemSizeAdd"
                      v-model="form.terminalId"
                      placeholder="请选择电表设备"
                      filterable
                      clearable
                      @change="(val) => changeTerminalId(val)"
                    >
                      <el-option
                        v-for="termianlxb in terminalXbElectricityOption"
                        :key="termianlxb.id"
                        :label="termianlxb.terminalId"
                        :value="termianlxb.terminalId"
                        @click.native="setHiddenParams(termianlxb)"
                      >
                        <span style="float: left">{{
                          termianlxb.terminalId
                        }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >{{ termianlxb.imei }}</span
                        >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="抄表时间" prop="readDate">
                    <el-date-picker
                      :size="formItemSizeAdd"
                      v-model="form.readDate"
                      type="datetime"
                      placeholder="请选择抄表时间"
                      style="width: 100%"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="组合有功电能1"
                    prop="combinationActiveEnergy1"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.combinationActiveEnergy1"
                      :precision="2"
                       
                       @change.native="sychPositiveActiveEnergy()"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="组合有功电能2"
                    prop="combinationActiveEnergy2"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.combinationActiveEnergy2"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="正向有功电能"
                    prop="positiveActiveEnergy"
                  >
                    <el-input-number
                      disabled
                      :size="formItemSizeAdd"
                      v-model="form.positiveActiveEnergy"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="反向有功电能"
                    prop="reverseActiveEnergy"
                  >
                    <el-input-number
                     
                      :size="formItemSizeAdd"
                      v-model="form.reverseActiveEnergy"
                      :precision="2"

                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    v-if="DbShow"
                    label="组合无功电能1"
                    prop="combinationIdleEnergy1"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.combinationIdleEnergy1"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <div v-if="DbShow">

              
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="组合无功电能2"
                    prop="combinationIdleEnergy2"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.combinationIdleEnergy2"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="第一象无功总电能"
                    prop="firstIdleEnergy"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.firstIdleEnergy"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>


               <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="第二象无功总电能"
                    prop="secondIdleEnergy"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.secondIdleEnergy"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="第三象无功总电能"
                    prop="thirdIdleEnergy"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.thirdIdleEnergy"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="第四象无功总电能"
                    prop="fourthIdleEnergy"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.fourthIdleEnergy"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="有功需量"
                    prop="activeReq"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.activeReq"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="无功需量"
                    prop="idleReq"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.idleReq"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="电流"
                    prop="electricCurrent"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.electricCurrent"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>


              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="电压"
                    prop="voltageCurrent"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.voltageCurrent"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="有功功率"
                    prop="activePower"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.activePower"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>


              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="a相正向有功电能"
                    prop="aPositiveActiveEnergy"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.aPositiveActiveEnergy"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="b相正向有功电能"
                    prop="bPositiveActiveEnergy"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.bPositiveActiveEnergy"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>


              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="c相正向有功电能"
                    prop="cPositiveActiveEnergy"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.cPositiveActiveEnergy"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="d相正向有功电能"
                    prop="dPositiveActiveEnergy"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.dPositiveActiveEnergy"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

            <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="无功功率"
                    prop="idlePower"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.idlePower"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="功率倍数"
                    prop="powerMagnification"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.powerMagnification"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              
              
               <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="正向有功最大需量发生时间"
                    prop="positiveActiveReqMaxTime"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.positiveActiveReqMaxTime"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="反向有功最大需量发生事件"
                    prop="reverseActiveReqMaxTime"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.reverseActiveReqMaxTime"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>


                 <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="距离上次的采集间隔分钟数"
                    prop="interval"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.interval"
                      :precision="0"
                      :step="1"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="频率F"
                    prop="frequency"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.frequency"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

             </div>
            </div>

            <!-- 水表  -->
            <div v-else-if="form.energyUseClassification == 2">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户编号" prop="userId">
                    <el-select
                    :filter-method="dataFilter"
                      :size="formItemSizeAdd"
                      v-model="form.userId"
                      placeholder="请选择用户"
                      filterable
                      clearable
                       style="width: 100%;"
                      @change="(val) => changeUserId(val)"
                    >
                      <el-option
                        v-for="userXb in userXbOption"
                        :key="userXb.id"
                        :label="userXb.userName"
                        :value="userXb.userId"
                      >
                        <span style="float: left">{{ userXb.userId }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >{{ userXb.userName }}</span
                        >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="设备编号" prop="terminalId">
                    <el-select
                      :size="formItemSizeAdd"
                      v-model="form.terminalId"
                      placeholder="请选择水表设备"
                       style="width: 100%;"
                      filterable
                      clearable
                      @change="(val) => changeTerminalId(val)"
                    >
                      <el-option
                        v-for="termianlxb in terminalXbOption"
                        :key="termianlxb.id"
                        :label="termianlxb.terminalId"
                        :value="termianlxb.terminalId"
                        @click.native="setHiddenParams(termianlxb)"
                      >
                        <span style="float: left">{{
                          termianlxb.terminalId
                        }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >{{ termianlxb.imei }}</span
                        >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="抄表时间" prop="readDate">
                    <el-date-picker
                     style="width: 100%;"
                    :size="formItemSizeAdd"
                      v-model="form.readDate"
                      type="datetime"
                      placeholder="请选择抄表时间"
                     
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="水表读数" prop="totalFlow">
                    <el-input-number
                     style="width: 100%;"
                    :size="formItemSizeAdd"
                      v-model="form.totalFlow"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

               <el-row>
                <el-col :span="12">
                  <el-form-item label="正向读数" prop="readNumber">
                    <el-input-number
                    :size="formItemSizeAdd"
                      v-model="form.readNumber"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="反向读数" prop="reverseNumber">
                    <el-input-number
                    :size="formItemSizeAdd"
                      v-model="form.reverseNumber"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="终端电压(V)" prop="terminalVol">
                    <el-input-number
                    :size="formItemSizeAdd"
                      v-model="form.terminalVol"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="信号强度" prop="terminalCsq">
                    <el-input-number
                    :size="formItemSizeAdd"
                      v-model="form.terminalCsq"
                      :precision="0"
                      :step="1"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="阀门状态" prop="valveState">
                    <el-switch
                    :size="formItemSizeAdd"
                      v-model="form.valveState"
                      active-value="1"
                      inactive-value="0"
                    ></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { addElectricityMeterHistoryAndRealDate } from "@/api/datastatistics/electricity/electricityMeterHistory";
import { addMeterhistoryandRealtimeData } from "@/api/dataquery/metered/meteredhistory";

import { getAreaTree } from "@/api/tree/index";
import { listUsersxbAll } from "@/api/record/usersxb";
import { listElectricityTerminalsXbAll } from "@/api/basedata/elecTerminalXb";
import { listTerminalxbAll } from "@/api/record/terminalxb";
import {
  listRealtimegatherdataxb,
  addRealtimegatherdataxb,
} from "@/api/datastatistics/electricity/electricityRealtimegatherdata";
import {
  getRealtimegatherListXbView,
  addRealtimegatherdataXbView,
} from "@/api/dataquery/metered/realtimegatherdataXbView";

import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";

import { itemMultiply } from "@/utils/index";


export default {
  name: "Xb",
  dicts: [
    "belong_department",
    "sign_platform",
    "energy_use_classification",
    "energy_use_item",
    "energy_use_item_water",
    "realtime_data_status",
    "realtime_full_status",
    
    
  ],
  data() {
    return {
      DbShow:false,
      // 用户下拉框中的数据
      userXbOption: [],
      userXbOptionCopy: [],
       userXbOptionQuery: [],
      // 设备下拉框中的数据  水表
      terminalXbOption: [],

      // 设备下拉框中的数据  电表
      terminalXbElectricityOption: [],

      title: "",
      // 是否显示弹出层
      open: false,
      form: {},
      rules: {
        // userId: [
        //   { required: true, message: "用户编号不能为空", trigger: "change" },
        // ],
        // terminalId: [
        //   { required: true, message: "设备编号不能为空", trigger: "change" },
        // ],
        // readDate: [
        //   { required: true, message: "抄表时间不能为空", trigger: "change" },
        // ],
        // totalFlow: [
        //   { required: true, message: "水表读数不能为空", trigger: "blur" },
        // ],
        // readNumber: [
        //   { required: true, message: "正向读数不能为空", trigger: "change" },
        // ],
        // reverseNumber: [
        //   { required: true, message: "反向读数不能为空", trigger: "blur" },
        // ],
        userId: [
            { required: true, message: "用户编号不能为空", trigger: "change" },
          ],
          terminalId: [
            { required: true, message: "设备编号不能为空", trigger: "blur" },
          ],
          readDate: [
            { required: true, message: "抄表时间不能为空", trigger: "change" },
          ],
          combinationActiveEnergy1: [
            {
              required: true,
              message: "组合有功电能1不能为空",
              trigger: "blur",
            },
          ],
          
      },
      defaultExpandedKeys: [],
      // 区域树的宽度
      treeWidth: "",
      currentKey: "",
      screenHeight: null,
      formItemSize: "mini",
      formItemSizeAdd: "default",
      collapseAble: false,
      fold: false,
      maxShow: 4,
      labelWidth: "70px",
      // 列信息
      columns: [
        { key: -1 },
        { key: 0, label: `用户名称`, visible: true },
        { key: 1, label: `用户编号`, visible: true },
        { key: 2, label: `设备编号`, visible: true },
        { key: 3, label: `IMEI`, visible: true },
        { key: 4, label: `水表读数`, visible: true },
        { key: 5, label: `终端电压`, visible: true },
        { key: 6, label: `阀门状态`, visible: true },
        { key: 7, label: `信号强度`, visible: true },
        { key: 8, label: `抄表时间`, visible: true },

        {
          key: 9,
          label: `正向有功电能`,
          prop: "positiveActiveEnergy",
          visible: true,
        },
        {
          key: 10,
          label: `反向有功电能`,
          prop: "reverseActiveEnergy",
          visible: true,
        },
        {
          key: 11,
          label: `组合有功电能1`,
          prop: "combinationActiveEnergy1",
          visible: true,
        },
        {
          key: 12,
          label: `组合有功电能2`,
          prop: "combinationActiveEnergy2",
          visible: true,
        },
        {
          key: 13,
          label: `组合无功电能1`,
          prop: "combinationIdleEnergy1",
          visible: true,
        },
        {
          key: 14,
          label: `组合无功电能2`,
          prop: "combinationIdleEnergy2",
          visible: true,
        },
        {
          key: 15,
          label: `第一象无功总电能`,
          prop: "firstIdleEnergy",
          visible: false,
        },
        {
          key: 16,
          label: `第二象无功总电能`,
          prop: "secondIdleEnergy",
          visible: false,
        },
        {
          key: 17,
          label: `第三象无功总电能`,
          prop: "thirdIdleEnergy",
          visible: false,
        },
        {
          key: 18,
          label: `第四象无功总电能`,
          prop: "fourthIdleEnergy",
          visible: false,
        },
        { key: 19, label: `有功需量`, prop: "activeReq", visible: false },
        { key: 20, label: `无功需量`, prop: "idleReq", visible: false },
        { key: 21, label: `电流`, prop: "electricCurrent", visible: false },
        { key: 22, label: `电压`, prop: "voltageCurrent", visible: false },
        { key: 23, label: `有功功率`, prop: "activePower", visible: false },
        {
          key: 24,
          label: `a相正向有功电能`,
          prop: "aPositiveActiveEnergy",
          visible: false,
        },
        {
          key: 25,
          label: `b相正向有功电能`,
          prop: "bPositiveActiveEnergy",
          visible: false,
        },
        {
          key: 26,
          label: `c相正向有功电能`,
          prop: "cPositiveActiveEnergy",
          visible: false,
        },
        {
          key: 27,
          label: `d相正向有功电能`,
          prop: "dPositiveActiveEnergy",
          visible: false,
        },
        { key: 28, label: `无功功率`, prop: "idlePower", visible: false },
        {
          key: 29,
          label: `功率倍数`,
          prop: "powerMagnification",
          visible: false,
        },
        {
          key: 30,
          label: `正向有功最大需量发生时间`,
          prop: "positiveActiveReqMaxTime",
          visible: false,
        },
        {
          key: 31,
          label: `反向有功最大需量发生时间`,
          prop: "reverseActiveReqMaxTime",
          visible: false,
        },
        {
          key: 32,
          label: `距离上次的采集间隔分钟数`,
          prop: "interval",
          visible: false,
        },
        { key: 33, label: `频率F`, prop: "frequency", visible: false },
      ],
      defaultProps: {
        children: "children",
        label: "sheetsName",
      },
      filterText: "",
      // 默认排序
      defaultSort: { prop: "readDate", order: "descending" },
      // 区域树选项
      sheetsTreeList: [],
      // 遮罩层
      loading: false,
      treeLoading: false,
      TerminalIDs: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 实时数据采集（小）表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        sheetsCode: null,
        userName: null,
        userId: null,
        terminalId: null,
        loginUserId: null,
        systemFlag: null,
        signPlatform: null,
        imei: null,
        energyUseClassification: "电",
        energyUseItem: null,
        // installAddress:null,
        dataStatus:null,
        fullStatus:null,
      },
      energyUseClassification: 1,
      changeShowData: "power",
    };
  },
  created() {
    this.screenHeight = document.body.clientHeight;
    // this.getUserXbList();
  },
  computed: {
    dynamicFormStyle() {
      return this.form.energyUseClassification === '1'
      ? { overflowY: 'scroll', height: '360px' }
      : {};
  },

    getAvailableHeight() {
      return (
        this.screenHeight - (this.showSearch ? (this.fold ? 250 : 211) : 165)
      );
    },
    userId() {
      return this.$store.state.user.userId;
    },
    systemFlag() {
      return this.$store.state.user.systemFlag;
    },
  },
  mounted() {
    this.getUserXbList();
    this.getTreeList();
    this.treeWidth = this.$refs["tree"]?.$el.offsetWidth - 15;
    // 通过最大显示个数控制展开/折叠
    if (this.maxShow > 0) {
      this.minShowControl();
    }
  },
  watch: {
    // 根据名称筛选区域树
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    // changeShowData: {
    //   handler() {
    //     this.$nextTick(() => {
    //       // 强制表格重新计算布局
    //       this.$refs.table && this.$refs.table.doLayout();
    //     });
    //   },
    //   immediate: true
    // },

    // 'columns': {
    //   handler() {
    //     this.$nextTick(() => {
    //       // 当列可见性变化时，也需要重新计算布局
    //       this.$refs.table && this.$refs.table.doLayout();
    //     });
    //   },
    //   deep: true
    // }
    changeShowData: {
      handler(newVal) {
        // 切换数据类型后，等待DOM更新完成后重新计算表格布局
        this.$nextTick(() => {
          if (this.$refs.table) {
            this.$refs.table.doLayout();

            // 重置滚动条位置
            const tableWrapper = this.$refs.table.$el.querySelector(
              ".el-table__body-wrapper"
            );
            if (tableWrapper) {
              tableWrapper.scrollLeft = 0;
            }
          }
        });
      },
    },
  },
  methods: {
     parseDataStatus(readDate) {
      if (!readDate) { //val存在
         return "";
      }
      if(parseTime(readDate, "{y}-{m}-{d}") == parseTime(new Date(), "{y}-{m}-{d}")){
        return "1";
      }
      return "0";
     },
    dataFilter(val) {
        if (val) { //val存在
          this.userXbOption = [];
          this.userXbOption = this.userXbOptionCopy.filter((item) => {
          if (!!~item.userName.indexOf(val) || !!~item.userName.toUpperCase().indexOf(val.toUpperCase())
             || !!~item.userId.indexOf(val) || !!~item.userId.toUpperCase().indexOf(val.toUpperCase()) ) {
                return true
             }
          })
        } else { //val为空时，还原数组
          this.userXbOption = this.userXbOptionCopy;
        }
        this.$forceUpdate();
      },
     dataFilterQuery(val) {
        if (val) { //val存在
          this.userXbOptionQuery = [];
          this.userXbOptionQuery = this.userXbOptionCopy.filter((item) => {
          if (!!~item.userName.indexOf(val) || !!~item.userName.toUpperCase().indexOf(val.toUpperCase())
             || !!~item.userId.indexOf(val) || !!~item.userId.toUpperCase().indexOf(val.toUpperCase()) ) {
                return true
             }
          })
        } else { //val为空时，还原数组
          this.userXbOptionQuery = this.userXbOptionCopy;
        }
        this.$forceUpdate();
      },


    sychPositiveActiveEnergy(){
      this.form.positiveActiveEnergy = this.form.combinationActiveEnergy1
      
    },
    // 获取所有客户
    getUserXbList() {
      listUsersxbAll().then((response) => {
        this.userXbOption = response.rows;
        this.userXbOptionCopy = response.rows;
        this.userXbOptionQuery = response.rows;
      });
    },

    // 根据客户获取设备信息   水表
    getTerminalXbList() {
      listTerminalxbAll({
        userId: this.form.userId,
        systemFlag: this.systemFlag,
        loginUserId: this.loginUserId,
      }).then((response) => {
        this.terminalXbOption = response.rows;
      });
    },
    // 根据客户获取设备信息  电表
    getTerminalXbElectricityList() {
      listElectricityTerminalsXbAll({
        userId: this.form.userId,
      }).then((response) => {
        this.terminalXbElectricityOption = response.rows;
      });
    },

    /** 添加户表档案按钮操作 */
    handleAdd() {
      this.reset();
      this.getUserXbList();
      // this.showCommunicationType = false
      this.title = "添加能耗监控数据";
      this.open = true;
      this.form.reverseActiveEnergy= 0;
      this.form.energyUseClassification = '1';
      this.form.magnification = 1;
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.resetForm("formXb");
    },

    /** 已绑定提交按钮 */
    submitForm() {
      this.$refs["formXb"].validate((valid) => {
        if (valid) {
          if (this.title === "修改能耗监控数据") {
            updateTerminalxb(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else if (this.title === "添加能耗监控数据") {
            var  _magnification = this.form.magnification ? this.form.magnification : 1;
            if (this.form.energyUseClassification == 1) {
              //电表
              addElectricityMeterHistoryAndRealDate(
              Object.assign(this.form, {
                combinationActiveEnergy1: itemMultiply(this.form.combinationActiveEnergy1, _magnification) ,
                combinationActiveEnergy2: itemMultiply(this.form.combinationActiveEnergy2, _magnification) ,
                positiveActiveEnergy: itemMultiply(this.form.positiveActiveEnergy, _magnification) ,
                reverseActiveEnergy: itemMultiply(this.form.reverseActiveEnergy, _magnification) ,
              })
            ).then((response) => {
                  this.$modal.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                })
                .catch((r) => {
                  console.error(r);
                  Message.error("新增失败，请联系管理员！");
                });
            } else {
              //水表
              addMeterhistoryandRealtimeData(
                Object.assign(this.form, {
                totalFlow: itemMultiply(this.form.totalFlow, _magnification) ,
                readNumber: itemMultiply(this.form.readNumber, _magnification) ,
                reverseNumber: itemMultiply(this.form.reverseNumber, _magnification) ,
                
              }))
                .then((response) => {
                  this.$modal.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                })
                .catch((r) => {
                  console.error(r);
                  Message.error("新增失败，请联系管理员！");
                });
            }
            // addTerminalxb(this.form).then((response) => {
            //   this.$modal.msgSuccess("新增成功");
            //   this.open = false;
            //   this.getList();
            // });
          }
        }
      });
    },

    changeEnergyUseClassification(val) {
      this.energyUseClassification = val;
    },

    changeEnergyUseClassificationForm(val) {
      this.form = {};
      this.form.magnification= 1;
      this.form.reverseActiveEnergy= 0;
      this.form.energyUseClassification = val;
      this.getUserXbList();

      if (1 == val) {
        this.rules = {
          userId: [
            { required: true, message: "用户编号不能为空", trigger: "change" },
          ],
          terminalId: [
            { required: true, message: "设备编号不能为空", trigger: "blur" },
          ],
          readDate: [
            { required: true, message: "抄表时间不能为空", trigger: "change" },
          ],
          combinationActiveEnergy1: [
            {
              required: true,
              message: "组合有功电能1不能为空",
              trigger: "blur",
            },
          ],
        };
      } else if (2 == val) {
        this.rules = {
          userId: [
            { required: true, message: "用户编号不能为空", trigger: "change" },
          ],
          terminalId: [
            { required: true, message: "设备编号不能为空", trigger: "blur" },
          ],
          readDate: [
            { required: true, message: "抄表时间不能为空", trigger: "change" },
          ],
          totalFlow: [
            { required: true, message: "水表读数不能为空", trigger: "blur" },
          ],
          readNumber: [
          { required: true, message: "正向读数不能为空", trigger: "change" },
          ],
          reverseNumber: [
          { required: true, message: "反向读数不能为空", trigger: "blur" },
          ],

        };
      }
    },
    changeUserId(val) {
      this.form.terminalId = null;
      if (!val) {
        this.terminalXbOption = [];
        this.terminalXbElectricityOption = [];
        return;
      }
      if (this.form.energyUseClassification == 1) {
        this.getTerminalXbElectricityList();
      } else {
        this.getTerminalXbList();
      }
    },
    setHiddenParams(item) {
      this.form.supplierId = item.supplierId;
      this.form.locationNb = item.locationNb;
      this.form.tenantId = item.tenantId;
    },
    changeTerminalId(val) {
      this.form.terminalId = val;
      // this.form.terminalId = val;

      this.form = Object.assign(
        {},
        {
          ...this.form,
        }
      );
    },
    /** 排序触发事件 */
    handleSorterChange({ column, prop, order }) {
      this.queryParams.orderByColumn = prop;
      this.queryParams.isAsc = order;
      this.getList();
    },
    /** 检查设置排序字段 */
    checkSortColumn() {
      if (!this.queryParams.orderByColumn) {
        this.queryParams.orderByColumn = this.defaultSort.prop;
        this.queryParams.isAsc = this.defaultSort.order;
      }
    },
    // // 初始化表格 解决表格固定操作列的问题
    // init() {
    //   // 调用接口获取到数据后
    //   let _self = this
    //   this.$nextTick(() => {
    //     window.setTimeout(() => {
    //       _self.$refs.table.doLayout()
    //     }, 100)
    //   })
    // },
    // 展开折叠按钮
    shiftCollapseAble() {
      this.fold = !this.fold;
      this.minShowControl();
    },
    // 通过maxShow控制元素显示/折叠
    minShowControl() {
      const group = window.document.querySelectorAll(
        `#searchFilter .el-form-item.el-form-item--${this.formItemSize}`
      );
      const len = group?.length ? group?.length : 0;
      if (this.maxShow < len) {
        group.forEach((item, index) => {
          if (index > this.maxShow - 1 && index < len) {
            item.hidden = !this.fold;
          }
        });
        this.collapseAble = true;
      } else {
        this.collapseAble = false;
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.sheetsName.indexOf(value) !== -1;
    },
    /** 查询区域树 */
    getTreeList() {
      this.treeLoading = true;
      // let treeType = "0,1"
      // getAreaTree(treeType).then(response => {
      //   this.sheetsTreeList = response.data;
      //   this.defaultExpandedKeys = [this.sheetsTreeList[0].sheetsCode];
      //   this.currentKey = this.sheetsTreeList[0].sheetsCode
      //   this.$nextTick(() => {
      //     window.setTimeout(() => {
      //       this.$refs.tree.setCurrentKey(this.currentKey)
      //       this.$refs.tree.setCurrentNode(this.sheetsTreeList[0])
      //     }, 100)
      //   })
      //   this.getList();
      //   this.treeLoading = false;
      // });
      this.sheetsTreeList = JSON.parse(localStorage.getItem("meteredTreeData"));
      this.defaultExpandedKeys = [this.sheetsTreeList[0].sheetsCode];
      if (this.sheetsTreeList.length === 0) {
        this.treeLoading = false;
      } else {
        // if(this.systemFlag !== 0) {
        //   this.currentKey = this.sheetsTreeList[0].sheetsCode
        //   this.$nextTick(() => {
        //     window.setTimeout(() => {
        //       this.$refs.tree.setCurrentKey(this.currentKey)
        //       this.$refs.tree.setCurrentNode(this.sheetsTreeList[0])
        //     }, 100)
        //   })
        this.getList();
        // }else{
        //   this.currentKey = ''
        //   this.$nextTick(() => {
        //     window.setTimeout(() => {
        //       this.$refs.tree.setCurrentKey(this.currentKey)
        //       this.$refs.tree.setCurrentNode(this.sheetsTreeList[0])
        //     }, 100)
        //   })
        //   this.getList();
        // }
        this.treeLoading = false;
      }
    },
    /** 查询实时数据采集（小）列表 */
    getList() {
      this.checkSortColumn();
      this.loading = true;
      let choiceCheck = this.$refs.tree.getCurrentNode();
      this.queryParams.systemFlag = this.systemFlag;
      this.queryParams.loginUserId = this.userId;
      if (!choiceCheck) {
        this.queryParams.sheetsCode = "";
      } else {
        this.queryParams.sheetsCode = choiceCheck.sheetsCode;
      }

      // 使用局部变量保存分类值避免异步问题
      const energyType = this.energyUseClassification;
      this.dataList = [];

      const handleResponse = (response) => {
        this.$nextTick(() => {
          this.dataList = response.rows;
          this.total = response.total;
          // 统一在数据更新后关闭loading
          setTimeout(() => {
            this.loading = false;
          }, 200);
        });
      };

      if (energyType == 1) {
        listRealtimegatherdataxb(this.queryParams).then((response) => {
          console.log(response);

          this.changeShowData = "power";
          handleResponse(response);
        });
      } else if (energyType == 2) {
        getRealtimegatherListXbView(this.queryParams).then((response) => {
          this.changeShowData = "water";
          handleResponse(response);
        });
      }
    },
    handleNodeClick(data) {
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      if (this.energyUseClassification == 1) {
        this.download(
          "datastatistics/electricityRealtimegatherdata/export",
          {
            ...this.queryParams,
          },
          `电表实时数据.xlsx`
        );
      } else {
        this.download(
          "datastatistics/realtimegatherdataxb/export",
          {
            ...this.queryParams,
          },
          `水表实时数据.xlsx`
        );
      }
    },
  },
};
</script>
<style scoped lang="scss">

 ::v-deep .el-form-item__content 
  {
  .el-input-number
  ,el-select
  ,el-date-picker{
    width: 100%;
   }
  }




// 设置本身箭头为隐藏状态
::v-deep .el-tree-node__expand-icon {
  width: 20px;
  padding: 0;
  margin: 5px 0;

  svg {
    display: none;
    width: 0;
  }
}

// 虚线所需样式
::v-deep .treeCont {
  .el-tree-node {
    width: fit-content;
    min-width: var(--treeWidth);
  }
  .el-tree > .el-tree-node:before {
    //border-top: none;
    padding-left: 0px;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node__content {
    padding-left: 5px !important;
  }

  .el-tree-node__children {
    //overflow: visible !important;
    .el-tree-node {
      position: relative;
      padding-left: 5px;
    }
  }

  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    width: 4px;
  }

  .el-tree-node__children {
    padding-left: 18px;
  }

  .el-tree-node :last-child:before {
    height: 17px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
    top: 25px;
    width: 0px;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #c0c4cc;
    height: 100%;
    top: -3px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #c0c4cc;
    height: 0px;
    top: 13px;
    width: 16px;
  }
}

// 默认三角行换成加减号
::v-deep .treeCont {
  .el-tree-node__content > .el-tree-node__expand-icon {
    width: 16px;
    //width: 0px;
    padding: 0px;
    font-size: 16px !important;
    margin-right: 5px; //新增
  }

  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  //有子节点 且未展开
  .el-tree .el-tree-node__expand-icon:before {
    background: url("../../../../assets/images/jia.png") no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }

  .custom-tree-node .el-icon svg {
    display: block !important;
    color: #000;
  }

  //有子节点 且已展开
  .el-tree .el-tree-node__expand-icon.expanded:before {
    background: url("../../../../assets/images/jian.png") no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }

  //没有子节点
  .el-tree .el-tree-node__expand-icon.is-leaf::before {
    background: none;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }
}
//.form_col {
//  width: 80%;
//
//  ::v-deep .el-form {
//    width: 100%;
//  }
//
//  ::v-deep .el-form-item {
//    width: 23%;
//  }
//}
//
//.form_query {
//  width: 20%;
//  text-align: right;
//}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
